<template>
  <div>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="任务状态">
        <el-radio-group v-model="status" @change="statusChangeMethod">
          <el-radio :label="-1">全部</el-radio>
          <el-radio :label="1">已完成</el-radio>
          <el-radio :label="0">未完成</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="间隔时间">
        <el-input-number v-model="interval" size="mini" @change="intervalChangeMethod" :min="3" :max="10"></el-input-number>
      </el-form-item>
      <!--  <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item> -->
    </el-form>
    <el-table :data="list" height="640" border style="width: 100%;margin-top: 10px;">
      <el-table-column type="index" width="50"></el-table-column>
      <!-- <el-table-column prop="task_id" label="任务id" width="150"></el-table-column> -->
      <el-table-column prop="task_name" label="任务名称" width="150"></el-table-column>
      <el-table-column prop="pid" label="pid" width="80"></el-table-column>
      <el-table-column prop="source" label="source" width="80"></el-table-column>
      <el-table-column prop="sortNum" label="当前数" width="60"></el-table-column>
      <el-table-column prop="sum" label="歌单总数" width="60"></el-table-column>
      <el-table-column prop="start_time" label="开始时间"></el-table-column>
      <el-table-column prop="modify_time" label="更新时间"></el-table-column>
      <el-table-column label="进度">
        <template slot-scope="{row}">
          <el-progress v-show="(row.sortNum / row.sum) >= 1" :percentage="100" status="success"></el-progress>
          <el-progress v-show="(row.sortNum / row.sum) < 1" :percentage="parseInt((row.sortNum / row.sum) * 100)"></el-progress>
          <div v-show="(row.sortNum / row.sum) < 1 && row.stop === true">
            <!--  <el-button @click="continueMethod(row)" size="mini" type="primary" icon="el-icon-caret-right" circle></el-button> -->
            <el-progress :text-inside="true" :stroke-width="18" :percentage="parseInt((row.sortNum / row.sum) * 100)" status="exception"></el-progress>
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column label="操作">
        <template slot-scope="{row}">
          <el-button size="mini" type="primary" icon="el-icon-refresh">重启</el-button>
          <el-button size="mini" type="primary" icon="el-icon-caret-right">继续</el-button>
        </template>
      </el-table-column> -->
    </el-table>
  </div>
</template>
<script>
import apis from "@utils/apis";

export default {
  data() {
    return {
      list: [],
      source: '',
      status: -1,
      interval: 3,
      intervalId: '',
    }
  },

  components: {

  },

  beforeRouteUpdate(to, from, next) {
    let {
      query,
    } = to
    this.source = query.source
    this.listMethod()
  },

  beforeRouteLeave(to, from, next) {
    if (this.intervalId)
      clearInterval(this.intervalId)
    next()
  },

  mounted() {
    this.source = this.$route.query.source
    this.listMethod()
  },

  methods: {
    listMethod() {
      let loading = this.$loading({
        lock: true,
        text: '数据加载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      this.intervalId = setInterval(() => {
        apis.taskListApi({
          source: this.source,
        }).then(res => {
          loading.close();
          this.list = res.result.docs
          this.listBak = this.list.concat()
          this.statusChangeMethod()
        })
      }, this.interval * 1000)

    },

    statusChangeMethod() {
      if (this.status == -1)
        this.list = this.listBak
      if (this.status == 0)
        this.list = this.listBak.filter(val => (val.sortNum / val.sum) < 1)
      if (this.status == 1)
        this.list = this.listBak.filter(val => (val.sortNum / val.sum) >= 1)
    },

    intervalChangeMethod(value) {
      this.interval = value
      if (this.intervalId)
        clearInterval(this.intervalId)
      this.listMethod()
    },

    continueMethod(row) {

    },

  }
}

</script>
